<template>
    <el-dialog v-model="editData.visible" :title="editData.title" center width="25%" top="10vh" :close-on-click-modal="false">
        <div class="dialog-content">
            <el-form :model="editData.form" label-width="auto" style="width:100%" ref="formRef" :rules="editData.rules">
                <el-row :gutter="50">

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="标题" prop="label">
                            <el-input v-model="editData.form.label" placeholder="请输入赛制标题" clearable/>
                        </el-form-item>
                    </el-col>


                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="盘数" prop="set">
                            <el-input-number v-model="editData.form.set" placeholder="请输入盘数" clearable style="width:100%"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="权重" prop="weight">
                            <el-input-number v-model="editData.form.weight" placeholder="请输入权重" clearable style="width:100%"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="排序" prop="sortNum">
                            <el-input-number v-model="editData.form.sortNum" placeholder="请输入排序" min="0" clearable style="width:100%"/>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="启用状态" prop="status">
                            <el-switch v-model="editData.form.status" :active-value="1" :inactive-value="0"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editData.visible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup>
import { nextTick, reactive, ref, useTemplateRef } from 'vue'
import pointsRuleSApi from '@/api/model/points-rule-s.js'
import { ElMessage } from 'element-plus'

const emits = defineEmits(['update'])
defineExpose({ openDialog })
const formRef = useTemplateRef('formRef')
const editData = reactive({
    type: 'add',
    visible: false,
    form: {
        id: '',
        label: '',
        set: '',
        weight: '',
        sortNum: '',
        status: 1,
    },
    rules: {
        label: [
            { required: true, message: '请输入赛制名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        set: [
            { required: true, message: '请输入盘数', trigger: 'blur' },
        ],
        weight: [
            { required: true, message: '请输入权重', trigger: 'blur' },
        ]
    }
})

/**
 * 打开弹框
 * @param type
 * @param item
 */
function openDialog (type, item) {
    editData.title = type === 'add' ? '新增赛制' : '编辑赛制'
    editData.visible = true
    editData.type = type
    editData.form.id = ''
    nextTick(() => {
        formRef.value.resetFields()
        if (type === 'update') {
            const { id, label, set, weight, status, sortNum } = item || {}
            editData.form.id = id
            editData.form.label = label
            editData.form.set = set
            editData.form.weight = weight
            editData.form.status = status
            editData.form.sortNum = sortNum
        }
    })
}

/**
 * 提交表单
 */
function submitForm () {
    formRef.value.validate(async valid => {
        if (!valid) return
        editData.type === 'add' ? addItem() : updateItem()
    })
}

/**
 *  新增操作
 */
async function addItem () {
    const { code, data = [] } = await pointsRuleSApi.add.post({
        label: editData.form.label,
        set: editData.form.set,
        weight: editData.form.weight,
        status: editData.form.status,
        sortNum: editData.form.sortNum
    })
    if (code === 200) {
        ElMessage.success('新增成功')
        editData.visible = false
        emits('update')
    } else {
        ElMessage.error('新增失败')
    }
}

/**
 *  更新操作
 */
async function updateItem () {
    const { code, data = [] } = await pointsRuleSApi.update.post({
        id: editData.form.id,
        label: editData.form.label,
        set: editData.form.set,
        weight: editData.form.weight,
        status: editData.form.status,
        sortNum: editData.form.sortNum,
    })
    if (code === 200) {
        ElMessage.success('编辑成功')
        editData.visible = false
        emits('update')
    } else {
        ElMessage.error('编辑失败')
    }
}
</script>
